<template>
  <div class="home">
    <!-- 顶部菜单 -->
    <HeaderVue />
    <div class="home-container">
      <!-- 左侧菜单栏 -->
      <AsideVue />

      <!-- RouterView 二级路由 -->
      <router-view
        v-slot="{ Component }"
        class="home-container-routerview"
        :style="{ width: width + 'px' }"
      >
        <keep-alive include="searchComponents">
          <component :is="Component" />
        </keep-alive>
      </router-view>

      <!-- 右侧的 IDE + 终端 -->
      <div class="home-container-right">
        <div class="home-container-right-top">
          <EditorVue />
          <IframeVue />
        </div>
        <TerminalVue />
        <!-- 实现拖拽调整大小(这个应该控制左侧routerview的宽度) -->
        <div class="unicode-drag-bar" @mousedown="dragBarHandle"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import IframeVue from "../Iframe/index.vue";
import EditorVue from "../Editor/index.vue";
import AsideVue from "./components/Aside.vue";
import HeaderVue from "./components/Header.vue";
import TerminalVue from "../Terminal/index.vue";
import { mousedownHandler } from "../../utils/unicode-drag-bar";

// 定义宽度
const width = ref(220);

/**
 * 拖拽改变宽度
 */
function dragBarHandle(e: MouseEvent) {
  const temp = width.value;
  mousedownHandler(e, "lr", (dx: number) => {
    width.value = temp + dx;
    width.value = Math.max(width.value, 160);
    width.value = Math.min(width.value, 400);
  });
}
</script>

<style scoped>
.home {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: var(--t-main-background-color);
}
.home-container {
  height: calc(100% - 52px);
  display: flex;
}
.home-container-routerview {
  padding: 10px;
  height: 100%;
  border: solid var(--t-main-border-color) 1px;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.home-container-right {
  position: relative;
  flex: auto;
  display: flex;
  flex-direction: column;
}
.home-container-right > .unicode-drag-bar {
  width: var(--base);
  height: 100%;
  position: absolute;
  left: 0;
  cursor: ew-resize;
  transform: translateX(-50%);
}
.home-container-right-top {
  position: relative;
  flex: auto;
  display: flex;
}
</style>
